<template>
  <div class="Shop-container">
    <!-- 新增店铺/编辑店铺的弹出框 -->
    <el-dialog
      :title="modallType == 0 ? '新增店铺' : '编辑店铺'"
      :visible.sync="dialogVisible"
      width="49%"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :rules="rules"
        :inline="true"
        :model="form"
        label-width="80px"
      >
        <el-form-item label="店铺名称" prop="name">
          <el-input placeholder="请填写店铺名称" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址" prop="address">
          <el-input
            placeholder="请填写店铺地址"
            v-model="form.address"
          ></el-input>
        </el-form-item>
        <el-form-item label="经营类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option label="食品" value="食品"></el-option>
            <el-option label="图书" value="图书"></el-option>
            <el-option label="运动" value="运动"></el-option>
            <el-option label="数码" value="数码"></el-option>
            <el-option label="生鲜" value="生鲜"></el-option>
            <el-option label="医药" value="医药"></el-option>
            <el-option label="服装" value="服装"></el-option>
            <el-option label="美妆" value="美妆"></el-option>
            <el-option label="饰品" value="饰品"></el-option>
            <el-option label="电器" value="电器"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺简介" prop="description">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请填写店铺简介"
            v-model="form.description"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看商品部分的弹出框 -->
    <el-dialog
      title="查看商品"
      :visible.sync="goodsDialogVisible"
      width="49%"
      :before-close="handleClose"
    >
      <el-descriptions
        class="margin-top"
        :column="3"
        :size="size"
        border
        v-for="item in goodsSpecialData"
        :key="item.name"
      >
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-price-tag"></i>
            商品名称
          </template>
          {{ item.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-coin"></i>
            商品单价
          </template>
          {{ item.money }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-box"></i>
            商品库存
          </template>
          {{ item.stock }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-picture-outline"></i>
            商品图片
          </template>
          <img :src="item.img" alt="" width="100px" height="100px" />
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-button type="success" @click="handleAdd">+ 新增店铺</el-button>
    <el-table :data="tableData" border style="width: 100%" height="500px">
      <el-table-column prop="name" label="店铺名" width="180">
      </el-table-column>
      <el-table-column prop="type" label="经营类型" width="180">
      </el-table-column>
      <el-table-column prop="address" label="店铺地址" width="180">
      </el-table-column>
      <el-table-column prop="status" label="店铺状态" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-text="!scope.row.status ? '已打烊' : '开店中'"
            active-color="#409eff"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="a" label="上架商品" width="180">
        <template slot-scope="scope"
          ><el-link type="success" @click="viewGoods(scope.row)">
            <i class="el-icon-camera"></i> 查看商品</el-link
          >
        </template>
      </el-table-column>
      <el-table-column prop="description" label="店铺简介"> </el-table-column>
      <el-table-column prop="b" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { shopList } from "../api/mockServeData/shop";
import {
  getGoods,
  addShop,
  editShop,
  delShop,
  shopDelGoods,
  shopEditGoods,
} from "../api";
export default {
  data() {
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入用户名"));
      }
      for (let i = 0; i < shopList.length; i++) {
        if (
          (shopList[i].id !== this.form.id &&
            value === shopList[i].name &&
            this.modallType === 1) ||
          (value === shopList[i].name && this.modallType === 0)
        ) {
          return callback(new Error("这个用户名被使用咯"));
        }
      }
      callback();
    };
    return {
      tableData: [],
      goodsName: {
        name: "",
      },
      form: {
        id: "",
        name: "",
        type: "",
        address: "",
        status: "",
        description: "",
      },
      rules: {
        name: [
          {
            trigger: "blur",
            validator: checkName,
          },
        ],
        address: [
          { required: true, message: "请填写店铺地址", trigger: "blur" },
        ],
        type: [{ required: true, message: "请选择经营类型", trigger: "blur" }],
        description: [
          { required: true, message: "请填写店铺简介", trigger: "blur" },
        ],
      },
      goodsDialogVisible: false,
      dialogVisible: false,
      goodsTableData: [],
      goodsSpecialData: [],
      modallType: 0, // 0 表示新增的弹窗，1 表示编辑
      nameStatus: {
        oldName: "", // 打开表单之前的店铺名
        newName: "", // 修改之后的店铺名
      },
    };
  },
  methods: {
    getGoodsList() {
      getGoods({
        params: { ...this.goodsName },
      }).then(({ data }) => {
        this.goodsTableData = data.list;
      });
    },
    viewGoods(row) {
      this.goodsDialogVisible = true;
      this.goodsSpecialData = this.goodsTableData.filter((item) => {
        return item.shops === row.name;
      });
    },
    handleAdd() {
      this.dialogVisible = true;
      this.modallType = 0;
    },
    handleEdit(row) {
      this.modallType = 1;
      this.dialogVisible = true;
      // 需要对当前行数据进行深拷贝
      this.form = {
        id: row.id,
        name: row.name,
        address: row.address,
        status: row.status,
        type: row.type,
        description: row.description,
      };
      this.nameStatus.oldName = row.name;
    },
    handleDelete(row) {
      this.$confirm(
        "此操作将永久删除该店铺, 店铺内的商品也会删除哦，是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          delShop({ id: row.id }).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            // 获取的列表数据
            this.tableData = shopList;
          });
          shopDelGoods({ name: row.name }).then(() => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClose() {
      this.form = {
        id: "",
        name: "",
        type: "",
        address: "",
        status: "",
        description: "",
      };
      this.dialogVisible = false;
      this.goodsDialogVisible = false;
      this.$refs.form.resetFields();
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 后续对表单数据的处理
          if (this.modallType === 0) {
            addShop(this.form).then(() => {
              // 重新获取列表的接口
              this.tableData = shopList;
            });
          } else {
            this.nameStatus.newName = this.form.name;
            editShop(this.form).then(() => {
              // 重新获取列表的接口
              this.tableData = shopList;
            });
            shopEditGoods(this.nameStatus).then(() => {});
          }
          // 关闭弹窗
          this.handleClose();
        }
      });
    },
    cancel() {
      this.handleClose();
    },
  },
  mounted() {
    this.tableData = shopList;
    this.getGoodsList();
  },
};
</script>

<style lang="less" scoped>
/deep/.el-button--success {
  margin: 0 0 20px 0;
}
</style>